<html>
	<title>Welcome to SWEAD</title>
	<link rel="stylesheet" href="./assets/css/style.css">
	<link rel="stylesheet" href="./assets/select2/select2.css">
	<body class="home">
		
		<div class="container">
			<div class="logo-dark">
				<img src="./assets/img/logo-dark.png" alt="">
			</div>
			<form action="" method="post">
				<div class="trip-type">
					<span class="round-trip active">Round trip</span>
					<span class="one-way">One way</span>
					<input type="hidden" id="tripType" name="tripType">
				</div>
				<div class="search">
					<div class="trip onward">
						<table>
							<tr>
								<td class="travel-date">
									<input type="text" id="onward-date" name="onward-date" value="09/12">
								</td>
								<td class="origin">
									<div class="airport">
										<input type="text" class="port" name="onwardOrigin" id="onwardOrigin">
									</div>
									<div class="caption">Origin</div>
								</td>
								<td class="destination">
									<div class="airport">
										<input type="text" class="port" name="onwardDestination" id="onwardDestination">
									</div>
									<div class="caption">Destination</div>
								</td>
							</tr>
						</table>
					</div>
					<div class="trip return">
						<table>
							<tr>
								<td class="travel-date">
									<input type="text" id="return-date" name="return-date" value="12/23">
								</td>								
								<td class="origin">
									<div class="airport">
										<input readonly="readonly" type="text" class="w200" name="returnOrigin" id="returnOrigin">
									</div>
									<div class="caption">Origin</div>
								</td>
								<td class="destination">
									<div class="airport">
										<input readonly="readonly" type="text" class="w200" name="returnDestination" id="returnDestination">
									</div>
									<div class="caption">Destination</div>
								</td>
							</tr>
						</table>
					</div>
					<div class="trip pax-input">
						<table>
							<tr>
								<td>
									<div>
										<input type="text" value="1">
									</div>
									<div class="caption">Adult</div>
								</td>
								<td>
									<div>
										<input type="text" value="0">
									</div>
									<div class="caption">Child</div>
								</td>
								<td>
									<div>
										<input type="text" value="0">
									</div>
									<div class="caption">Infant</div>
								</td>
								<td>
									<input type="submit" value="Search">
								</td>
							</tr>
						</table>
					</div>
				</div>
			</form>
		</div>
	</body>
	<script type="text/javascript" src="./assets/js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="./assets/js/jquery-ui-1.9.0.custom.js"></script>
	<script type="text/javascript" src="./assets/select2/select2.min.js"></script>
	<script type="text/javascript">
	
	$(document).ready(function() {
		
		var findValueById = function(id, airports) {
			for (var i = airports.length - 1; i >= 0; i--) {
				if(airports[i]["id"]==id) {
					return airports[i]["text"];
				}
			};
		}
		var airports = [{"id":1,"text":"Ho Chi Minh"},{"id":2,"text":"Da Nang"},{"id":3,"text":"Ha Noi"},{"id":4,"text":"Vientiane"},{"id":5,"text":"Phnom Penh"},{"id":6,"text":"Bankok"},{"id":7,"text":"Kuala Lumpur"},{"id":8,"text":"Jakarta"},{"id":9,"text":"Manila"},{"id":10,"text":"Beijing"},{"id":11,"text":"Shanghai"},{"id":12,"text":"Hong Kong"},{"id":13,"text":"Macau"},{"id":14,"text":"Taipei"},{"id":15,"text":"Seoul"},{"id":16,"text":"Busan"},{"id":17,"text":"Kyoto"},{"id":18,"text":"Tokyo"},{"id":19,"text":"Los Angeles"},{"id":20,"text":"California"},{"id":21,"text":"Florida"},{"id":22,"text":"Seattle"},{"id":23,"text":"New York"}];

		$("#onward-date, #return-date").datepicker({ 
			dateFormat: "mm/dd",
			numberOfMonths: 2
		});
		$("input.port").select2( {
			data: airports,
			width: "200",
			placeholder: "Select a city",
		});
		$("#onwardDestination").change(function() {
			$("#returnOrigin").val(findValueById($("#onwardDestination").val(), airports));
		});
		$("#onwardOrigin").change(function() {
			$("#returnDestination").val(findValueById($("#onwardOrigin").val(), airports));
		});
		$(".onward-date").datepicker( "show" );
		$(".one-way").click(function() {
			$(".round-trip").removeClass("active", 200);
			$(".one-way").addClass("active", 200);
			$("#tripType").val("OW");
			$(".trip.return").hide("slow");
		});
		$(".round-trip").click(function() {
			$(".one-way").removeClass("active", 200);
			$(".round-trip").addClass("active", 200);
			$("#tripType").val("RT");
			$(".trip.return").show("slow");
		});

		
	})
	
	</script>
</html>